<template>
  <div class="layout">
<!--    <el-row>-->
      <!--    <component :is="menuComponent"></component>-->
      <TopNavBar/>
      <!--    <component is="administer-menu-component"></component>-->
<!--    </el-row>-->

<!--    <el-row style="width:100%;height:800px;">-->
      <div class="all" >
        <router-view/>
        <div class="background">
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
          <span class="bg"></span>
        </div>
      </div>
      <!-- 页脚代码开始 -->
      <!--    <footer>-->
      <!--      <p style="font-size: 16px;-->
      <!--          font-weight: 500;-->
      <!--          letter-spacing: 0px;">&copy; CopyRight 2023,BJTU SSE 努力的 海姆达尔小组. All Rights Reserved.</p>-->
      <!--      <div class="footer-links"></div>-->
      <!--      <div class="footer-nav">-->
      <!--        <ul>-->
      <!--          <li class="features">About</li>-->
      <!--          <li class="pricing">Emails：kimwest1996s@.gmail.com</li>-->
      <!--          <li class="faq">FAQ</li>-->
      <!--          <li class="blog">Blog</li>-->
      <!--        </ul>-->
      <!--      </div>-->
      <!--    </footer>-->
      <!-- 页脚代码结束 -->
<!--    </el-row>-->

  </div>


</template>

<script setup lang="ts">
import { computed } from 'vue';
import { priStore } from "@/store/modules/user";
import TopNavBar from "@/components/TopNavBar.vue";

const pri = priStore().pri; // 请根据需要修改全局变量的值

console.log(pri);

// 导入组件
import MenuComponent from './module/menu/menu.vue';
import SecurityMenuComponent from './module/menu/securityMenu.vue';
import AdministerMenuComponent from './module/menu/administerMenu.vue';

// const menuComponent = computed(() => {
//   if (pri === '1') {
//     return 'menu-component';
//   } else if (pri === '2') {
//     console.log('----------------------------------------')
//     return 'security-menu-component';
//   } else if (pri === '3') {
//     return 'administer-menu-component';
//   }else if (pri === '4') {
//     return 'caregiver-menu-component';
//   }
// });
</script>

<!--<script lang="ts">-->
<!--// 注册组件-->
<!--import { defineComponent } from 'vue';-->

<!--export default defineComponent({-->
<!--  components: {-->
<!--    MenuComponent,-->
<!--    SecurityMenuComponent,-->
<!--    AdministerMenuComponent,-->
<!--  },-->
<!--});-->

<!--</script>-->

<style lang="scss">
.layout{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.all{
  padding: 24px;
  min-height: calc(100vh - 60px - 48px);
  position: relative;
  overflow: hidden;
}
.item {

}
.el-card {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-bg-color: var(--el-fill-color-blank);
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f5f6f7;
  padding: 40px 0;
  text-align: center; /* 将元素水平居中对齐 */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; /* 将元素设置为弹性盒子 */
  align-items: center; /* 垂直居中元素 */
}

.footer-rights {
  font-size: 14px;
  color: #333;
}

.footer-links {
  display: flex;
  justify-content: center; /* 将链接居中对齐 */
  align-items: center;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; /* 将链接居中对齐 */
  align-items: center;
}

.footer-nav li {
  margin: 0 ;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
//background-color: #bd1a1a;
}

.footer-nav li:hover {
  color: #5188d5;
}

.features {
  margin-right: 20px;
}

.pricing {
  margin-right: 20px;
}

.faq {
  margin-right: 20px;
}

.blog {
  margin-right: 20px;
}

.background {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

$particleSize: 20vmin;
$animationDuration: 50s;
$amount: 20;
.bg {
  width: $particleSize;
  height: $particleSize;
  border-radius: $particleSize;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: $animationDuration;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  $colors: (
      #583C87,
      #E45A84,
      #FFACAC
  );
  @for $i from 1 through $amount {
    &:nth-child(#{$i}) {
      color: nth($colors, random(length($colors)));
      top: random(100) * 1%;
      left: random(100) * 1%;
      animation-duration: (random($animationDuration * 10) / 10) * 1s + 10s;
      animation-delay: random(($animationDuration + 10s) * 10) / 10 * -1s;
      transform-origin: (random(50) - 25) * 1vw (random(50) - 25) * 1vh;
      $blurRadius: (random() + 0.5) * $particleSize * 0.5;
      $x: if(random() > 0.5, -1, 1);
      box-shadow: ($particleSize * 2 * $x) 0 $blurRadius currentColor;
    }
  }
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

</style>